import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    TouchableWithoutFeedback,
    Animated
} from 'react-native';

import ColorUtils from '../Utils/ColorUtils'
import ScreenUtils from '../Utils/ScreenUtils'
import Collapsible from 'react-native-collapsible'

export default class CollapsibleText extends Component
{
    constructor(props)
    {
        super(props);

        this.icons = {
            'up': require('../img/arrow-up.png'),
            'down': require('../img/arrow-down.png')
        };

        this.state = {
            title: props.title,
            expanded: true,
        };
    }

    toggle()
    {
        this.setState({
            expanded: !this.state.expanded,
        })
    }


    render()
    {
        let icon = this.icons['down'];

        if (this.state.expanded)
        {
            icon = this.icons['up'];
        }

        return (
            <View style={styles.container}>
                <TouchableWithoutFeedback style={styles.button} onPress={this.toggle.bind(this)} underlayColor="#f1f1f1">
                    <View style={styles.titleContainer}>
                        <Text style={styles.title}>{this.state.title}</Text>
                        <Image style={styles.menuArrowDown} source={icon}/>
                    </View>
                </TouchableWithoutFeedback>
                <Collapsible collapsed={this.state.expanded} align="center">
                    {this.props.children}
                </Collapsible>
            </View>
        );
    }
}

var styles = StyleSheet.create({
    container: {
        backgroundColor: '#fff',
        overflow: 'hidden',
        marginTop: 4,
        marginBottom: 4,
        marginLeft: 8,
        marginRight: 8,
        // backgroundColor: ColorUtils.blue
    },
    titleContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        borderWidth: 1,
        padding: 4,
        borderColor: ColorUtils.blue,
    },
    title: {
        flex: 1,
        marginLeft: 8,
        color: ColorUtils.blue,
        fontSize: ScreenUtils.Font_12,
    },
    button: {},
    menuArrowDown: {
        width: 25,
        height: 25
    },
    body: {
        padding: 10,
        paddingTop: 0,
        paddingBottom: 0
    }
});

